<script setup lang="ts">
import { ref } from 'vue';

const disabled = ref(false);

const readonly = ref(false);

const editable = ref(true);

const bigNumber = ref(true);

const showButton = ref(true);

const showZero = ref(true);

const canNull = ref(true);

const useThousands = ref(true);

const autoDecimal = ref(true);

const max = ref(2000);

const min = ref(0);

const prefix = ref('');

const suffix = ref('');

const precision = ref(0);

const value = ref(1000);

const step = ref(1);

const alignment = ref('left');

const radioEnumData = ref([
    { value: 'left', name: '左对齐' },
    { value: 'center', name: '居中对齐' },
    { value: 'right', name: '右对齐' }
]);

</script>
<template>
    <div class="my-2 d-flex">
        <div class="f-demo-number-spinner"><input type="checkbox" v-model="disabled" />是否禁用</div>
        <div class="f-demo-number-spinner"><input type="checkbox" v-model="readonly" />是否只读</div>
        <div class="f-demo-number-spinner"><input type="checkbox" v-model="editable" />是否可编辑</div>
        <div class="f-demo-number-spinner"><input type="checkbox" v-model="showZero" />是否显示0值</div>
        <div class="f-demo-number-spinner"><input type="checkbox" v-model="canNull" />是否允许为null</div>
    </div>
    <div class="my-2 d-flex">
        <div class="f-demo-number-spinner"><input type="checkbox" v-model="showButton" />是否显示微调按钮</div>
        <div class="f-demo-number-spinner"><input type="checkbox" v-model="useThousands" />是否启用千分位</div>
        <div class="f-demo-number-spinner"><input type="checkbox" v-model="autoDecimal" />是否自动补全小数位数</div>
    </div>
    <div class="my-2 d-flex">
        <div class="f-demo-number-spinner">设置最大值:<input type="number" v-model="max" /></div>
        <div class="f-demo-number-spinner">设置最小值:<input type="number" v-model="min" /></div>
        <div class="f-demo-number-spinner">设置小数位数:<input type="number" v-model="precision" /></div>
        <div class="f-demo-number-spinner">设置步长:<input type="number" v-model="step" /></div>
    </div>
    <div class="my-2 d-flex">
        <div class="f-demo-number-spinner">设置前缀:<input type="text" v-model="prefix" /></div>
        <div class="f-demo-number-spinner">设置后缀:<input type="text" v-model="suffix" /></div>
    </div>
    <div class="my-2 d-flex">
        <div class="f-demo-number-spinner">对齐方式:<f-radio-group :enum-data="radioEnumData" v-model="alignment"> </f-radio-group></div>
    </div>

    <p>常规用法</p>
    <div>
        <span>{{ value }}</span>
    </div>
    <f-number-spinner
        v-model="value"
        :disabled="disabled"
        :readonly="readonly"
        :editable="editable"
        :show-button="showButton"
        :show-zero="showZero"
        :can-null="canNull"
        :use-thousands="useThousands"
        :max="max"
        :min="min"
        :prefix="prefix"
        :suffix="suffix"
        :precision="precision"
        :auto-decimal="autoDecimal"
        :step="step"
    ></f-number-spinner>
    <!--
    <p2>自定义格式化函数</p2>
    <f-number-spinner :formatter="''"></f-number-spinner>

    <p2>反格式化函数</p2>
    <f-number-spinner :parser="''"></f-number-spinner> -->
</template>

<style>
.f-demo-number-spinner {
    margin: 3px 10px;
}
.f-demo-number-spinner .farris-input-wrap {
    .custom-control.custom-radio {
        display: inline-block;
    }
}
</style>
